import React,{Component} from 'react';
import { Carousel, WingBlank,SearchBar,WhiteSpace,Grid,Card } from 'antd-mobile';
import { connect } from 'react-redux';
import { fetchCarouselList } from '../actions'

const mapStateToProps = state=>{
  return {
    carousel: state.carousel
  }
}
 class Tabs1 extends Component{
    componentDidMount(){
        this.props.fetchCarouselList();
      }
      render(){
        const {carousel} = this.props;
        return (
          <div style={{height:'530px'}}>
            <div>
                <SearchBar placeholder="搜索产品或新闻" maxLength={8} />
                <WhiteSpace />
            </div>
            <div>
            <Grid data={[
              { icon:'https://fuss10.elemecdn.com/7/d8/a867c870b22bc74c87c348b75528djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'美食' },
              { icon:'https://fuss10.elemecdn.com/c/7e/76a23eb90dada42528bc41499d6f8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'商超便利'},
              { icon:'https://fuss10.elemecdn.com/0/d0/dd7c960f08cdc756b1d3ad54978fdjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'水果' },
              { icon:'https://fuss10.elemecdn.com/7/0a/af108e256ebc9f02db599592ae655jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'医药健康' },
              { icon:'https://fuss10.elemecdn.com/3/01/c888acb2c8ba9e0c813f36ec9e90ajpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'浪漫鲜花' },
              { icon:'https://fuss10.elemecdn.com/e/58/bceb19258e3264e64fb856722c3c1jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'跑腿代购' },
              { icon:'https://fuss10.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'汉堡披萨' },
              { icon:'https://fuss10.elemecdn.com/c/21/e42997b86b232161a5a16ab813ae8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'厨房生鲜' },
              { icon:'https://fuss10.elemecdn.com/a/78/0fb469b2da210827ec16896e00420jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'炸鸡炸串' },
              { icon:'https://fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'地方菜系' },
              { icon:'https://fuss10.elemecdn.com/e/c7/b7ba9547aa700bd20d0420e1794a8jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'麻辣烫' },
              { icon:'https://fuss10.elemecdn.com/0/1a/314b6da88ab6c7ae9828f91652d40jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'速食简餐' },
              { icon:'https://fuss10.elemecdn.com/7/d6/6f2631288a44ec177204e05cbcb93jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'地方小吃' },
              { icon:'https://fuss10.elemecdn.com/a/7b/b02bd836411c016935d258b300cfejpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'大牌特惠' },
              { icon:'https://fuss10.elemecdn.com/e/89/185f7259ebda19e16123884a60ef2jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/', text:'米粉面馆' },]} isCarousel onClick={_el => console.log(_el)} />
            </div>
            <WingBlank>
            <Carousel
            autoplay = {true}
            infinite
          >
            {carousel.map(val => (
              <a
                key   = {val.id}
                href  = {val.url}
                style = {{ display: 'inline-block', width: '100%', height: 200 }}
              >
                <img
                  src   = {val.img}
                  alt   = {val.title}
                  style = {{ width: '100%', verticalAlign: 'top' }}

                />
              </a>
            ))}
          </Carousel>
            </WingBlank>
            <WingBlank size="lg">
            <WhiteSpace size="lg" />
            <Card>
            <Card.Header
                title="品质套餐"
                extra={<span>搭配齐全吃的好</span>}
            />
            <Card.Body>
                <div>
                  <img src='https://fuss10.elemecdn.com/e/ee/df43e7e53f6e1346c3fda0609f1d3png.png?imageMogr/format/webp/thumbnail/!282x188r/gravity/Center/crop/282x188/'/>
                </div>
            </Card.Body>
            <Card.Footer extra={<button>立即抢购</button>} />
            </Card>
            <WhiteSpace size="lg" />
        </WingBlank>
          </div>
        )
      }
    }

    export default connect(mapStateToProps,{fetchCarouselList})(Tabs1);
